<template>
  <view>
    <view class="articleTab">
      <view class="type1" @click="changeType(1)">
        <span :class="{ focusSpan: query.type == 1 }">文章</span>
      </view>
      <view class="type2" @click="changeType(2)">
        <span :class="{ focusSpan: query.type == 2 }">外链</span>
      </view>
    </view>
    <scroll-view scroll-y class="parentBox">
      <!-- 内 Box -->
      <view class="singleBox" v-for="(item, index) in articleArray" @click="goInfo(item.id)">
        <!-- 含有头图 -->
        <view class="hasPicture" v-if="item.header != null && item.header != ''">
          <image :src="item.header" mode="" class="imageView"></image>
          <view class="contentView">
            <view class="title">{{ item.title }}</view>
            <view class="content">{{ item.info }}</view>
          </view>
        </view>
        <!-- 没有头图 -->
        <view class="notPicture" v-else>
          <view class="title">{{ item.title }}</view>
          <view class="content">{{ item.info }}</view>
        </view>
        <view class="moreView">
          <view class="typeIcon">
            <span class="typeColorInner" v-if="item.type == 1">内部文章</span>
            <span class="typeColorLink" v-else>外链文章</span>
          </view>
          <span class="author">作者: {{ item.author ?  item.author : '匿名' }}</span>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { get, post } from '../../../static/js/request';

export default {
  data() {
    return {
      htmlTest: null,
      articleArray: [],
      query: {
        type: null
      }
    }
  },
  onShow() {
    this.getArticle();
  },
  methods: {
    changeType(type) {
      if (type == this.query.type)
        this.query.type = null;
      else
        this.query.type = type;
      this.getArticle();
    },
    getArticle() {
      post("/article/list", this.query).then(res => {
        console.log(res)
        this.articleArray = res.result;
      })
    },
    goInfo(id) {
      uni.navigateTo({
        url: '/pages/child/articleInfo?id=' + id,
      })
    }
  },
}
</script>

<style scoped>
.singleBox {
  border-radius: 20rpx;
  padding: 12rpx;
  width: 94%;
  margin: 24rpx auto;
  background: #F4F4F4;
  box-shadow: 3rpx 3rpx 3rpx 3rpx #dad9d9;
}

.singleBox>view {
  display: flex;
}

.hasPicture .imageView {
  width: 29%;
  height: 200rpx;
  border-radius: 20rpx;
}

.hasPicture .contentView {
  margin-left: 1%;
  width: 70%;
}

.title {
  font-size: 36rpx;
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
}

.hasPicture .title {
  margin: 6rpx 0rpx;
  letter-spacing: 2rpx;
  white-space: nowrap;

}

.notPicture .title {
  width: 30%;
  display: -webkit-box;
  text-overflow: ellipsis;
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content {
  font-size: 30rpx;
  display: -webkit-box;
  text-overflow: ellipsis;
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notPicture .content {
  width: 70%;
  margin-top: 6rpx;
  line-height: 1.4;
  -webkit-line-clamp: 4;
}

.articleTab {}

.articleTab>view {
  display: inline-block;
  width: 50%;
  text-align: center;
  color: white;
}

.articleTab view span {
  border-bottom: 1rpx solid white;
  padding: 4rpx 0rpx;
  width: max-content;
  font-size: 30rpx;
}

.articleTab view .focusSpan {
  border-bottom: 5rpx solid white;
  font-size: 34rpx;
  font-weight: bold;
  padding: 8rpx 20rpx;
}

.moreView {
  margin-top: 10rpx;
  font-size: 26rpx;
  font-weight: lighter;
  width: 100%;
  position: relative;
}

.typeIcon{
  width: max-content;
  font-weight: normal;
  font-size: 22rpx;
  display: inline-block;
  position: absolute;
  right: 0;
}

.typeColorInner{
  padding: 3rpx;
  border: 1px solid #B30611;
  color: #B30611;
  background-color: #B3061126;
  border-radius: 12rpx;
}

.typeColorLink{
  padding: 3rpx;
  color: #0e59fc;
  background-color: #0e59fc26;
  border: 1px solid #0e59fc;
  border-radius: 12rpx;
}
</style>